import React, { Component } from 'react'
import request from '@/utils/request';
import { DeleteOutlined, PlusCircleFilled, TagsOutlined } from '@ant-design/icons';
import {
    Input,
    Button,
    notification,
    Row,
    Col,
    Pagination,
    Empty,
    Tooltip,
    Table,
    Popconfirm,
    Tag,
} from 'antd';
import Styles from '../style.less'
import { getLabelList, getKeyWordList, delLabel, delKeyword } from '@/services/resource';
import AddLabels from './components/addLabels'
import AddKeyWords from './components/addKeyWords'
import AddKeyWordsByFile from './components/addKeyWordsByFile'
import NoData from '@/components/NoData';

const { Search } = Input;

class Resource extends Component {

    constructor(props) {
        super(props);
        this.state = {
            Heights: '',// 高度
            id: '',// 关键词id
            keywordName: '',// 关键词
            keywordList: [],// 关键词列表
            sameWordStr: '',// 同义词
            labelId: '',// 标签列表 选中项 id
            labelSearchVal: '',// 标签列表搜索内容
            labelList: [],// 标签列表
            isShowAddKeyWordModel: false,
            isShowAddKeyWordByFileModel: false,
            isShowAddLabelModel: false,
            pageNum: 1,
            pageSize: 10,
            total: 0,
        };
    }

    componentDidMount() {
        const Heights = document.getElementById("contentBox").offsetHeight;
        this.setState({ Heights, }, () => {
            this.queryLabelList();
        });
    }
    // 获取标签列表
    queryLabelList() {
        const { labelSearchVal } = this.state;
        getLabelList({ dictionaryLabelName: labelSearchVal }).then(res => {
            if (res.retCode === '0') {
                this.setState({ labelList: res.data, labelId: res.data[0] ? res.data[0].dictionaryLabelId : '', labelSearchVal, }, () => {
                    this.queryKeyWordList();
                });
            }
        })
    }
    // 获取标签下 关键词列表
    queryKeyWordList() {
        const { pageNum, pageSize, keywordName, labelId } = this.state;
        getKeyWordList(pageNum - 1, pageSize, keywordName, labelId).then(res => {
            if (res.retCode === '0') {
                this.setState({ keywordList: res.data.list, total: res.data.total })
            }
        })
    }

    // 控制弹窗打开
    addKeyWordModel(isShowAddKeyWordModel, data) {
        this.setState({ isShowAddKeyWordModel, id: data.keywordId, sameWordStr: data.keywordSame }, () => { !isShowAddKeyWordModel && this.queryKeyWordList(); })
    }

    addKeyWordByFileModel(isShowAddKeyWordByFileModel) {
        this.setState({ isShowAddKeyWordByFileModel, }, () => { !isShowAddKeyWordByFileModel && this.queryKeyWordList(); })
    }

    // 删除 标签 or 关键词
    onDeleteItem(id, type) {
        if (type === 'keyword') {
            const { pageNum, pageSize, total, } = this.state;
            delKeyword(id).then(res => {
                if (res.retCode == '0') {
                    notification['success']({
                        message: '操作成功',
                        key: '删除关键词',
                        description: '删除关键词成功',
                    });
                    if (pageNum > 0 && (pageNum - 1) * pageSize == total - 1) {
                        this.setState({ pageNum: pageNum - 1 }, () => {
                            this.queryKeyWordList();
                        });
                    } else {
                        this.queryKeyWordList();
                    }
                }
            });
        } else {
            delLabel(id).then(res => {
                if (res.retCode == '0') {
                    notification['success']({
                        message: '操作成功',
                        key: '删除标签',
                        description: '删除标签成功',
                    });
                    this.queryLabelList();
                }
            });
        }
    }

    // 标签列表搜索
    onSearch(labelSearchVal) {
        this.setState({ labelSearchVal, }, () => {
            this.queryLabelList();
        });
    }
    // 标签点击切换
    labelChange(labelId) {
        this.setState({ labelId, pageNum: 1 }, () => { this.queryKeyWordList(); });
    }
    // 关键词列表搜索
    onKeywordSearch(keywordName) {
        this.setState({ keywordName, pageNum: 1, }, () => { this.queryKeyWordList(); });
    }
    // 添加 标签
    onAddLabel(isShowAddLabelModel) {
        this.setState({ isShowAddLabelModel }, () => { !isShowAddLabelModel && this.queryLabelList(); });
    }

    // 翻页
    onPageChange(pageNum) {
        this.setState({ pageNum }, () => { this.queryKeyWordList(); });
    }

    render() {
        const { Heights, labelList, keywordList, labelId, isShowAddLabelModel, isShowAddKeyWordModel, isShowAddKeyWordByFileModel, labelSearchVal, sameWordStr, id, total, pageNum, pageSize, keywordName } = this.state;
        const columns = [
            {
                title: '关键词',
                dataIndex: 'keywordName',
                width: 220,
            },
            {
                title: '同义词',
                dataIndex: 'keywordSame',
                width: 280,
                render: record => {
                    return (
                        record && record.split(",").map((val, i) => {
                            return <Tag style={{ backgroundColor: 'rgba(240, 242, 245, 1)', color: 'rgba(61, 72, 82, 1)' }} key={i}>{val}</Tag>
                        })
                    )
                },
            },
            {
                title: '上传时间',
                dataIndex: 'createTimeShort',
                width: 120
            }, {
                title: '操作',
                width: 120,
                render: record => {
                    return (
                        <>
                            <a type="link" onClick={this.addKeyWordModel.bind(this, true, record)}>编辑</a>
                            <Popconfirm
                                title="确定删除标签？"
                                onConfirm={this.onDeleteItem.bind(this, record.keywordId, 'keyword')}
                            >
                                <a type="link">删除</a>
                            </Popconfirm>
                        </>
                    );
                },
            },
        ];

        return (
            <div>
                {labelList.length > 0 || labelSearchVal ? <Row>
                    <Col span={4} style={{ height: `${Heights - 160}px`, overflowY: 'auto' }} className={Styles.resource}>
                        <h5>标签列表<Tooltip title="添加标签"><PlusCircleFilled onClick={this.onAddLabel.bind(this, true)} /></Tooltip></h5>
                        <div style={{ paddingRight: 16 }}><Search placeholder="搜索标签" onSearch={value => this.onSearch(value)} /></div>
                        <div className={Styles.lists} style={{ height: `${Heights - 240}px` }}>
                            {labelList.length > 0 ? labelList.map((val, i) => {
                                return (
                                    <a key={i} data-id={val.dictionaryLabelId} className={labelId == val.dictionaryLabelId ? Styles.active : ''} onClick={this.labelChange.bind(this, val.dictionaryLabelId)}>
                                        <TagsOutlined data-id={val.dictionaryLabelId} />&nbsp;&nbsp;{val.dictionaryLabelName}
                                        <Popconfirm
                                            title="确定删除标签？"
                                            onConfirm={this.onDeleteItem.bind(this, val.dictionaryLabelId)}
                                        >
                                            <span role="delete"><DeleteOutlined /></span>
                                        </Popconfirm>
                                    </a>
                                );
                            })
                                : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                            }
                        </div>
                    </Col>
                    <Col span={20} style={{ height: `${Heights - 160}px` }} className={Styles.resourceTable}>
                        <h5 id={labelId}>
                            {
                                labelList.map(val => {
                                    if (val.dictionaryLabelId === labelId) {
                                        return val.dictionaryLabelName
                                    }
                                })
                            }&nbsp;
                        </h5>
                        <div style={{ marginBottom: 16 }}>
                            <Button type="primary" onClick={this.addKeyWordModel.bind(this, true, '')} style={{ marginRight: 12 }} >添加关键词</Button>
                            <Button type="primary" style={{ marginRight: 12 }} onClick={this.addKeyWordByFileModel.bind(this, true)}>批量上传</Button>
                            <Search placeholder="关键词" onSearch={value => this.onKeywordSearch(value)} style={{ width: 200 }} />
                        </div>
                        <Table
                            bordered
                            size={'middle'}
                            columns={columns}
                            dataSource={keywordList}
                            rowKey={record => record.keywordId}
                            pagination={{ total, current: pageNum, pageSize, onChange: this.onPageChange.bind(this) }}
                        />
                    </Col>
                </Row> : <NoData title={'您还没建立标签'} dec={'建立标签，才可对应的标签下导入或者添加关键词'} btn={'标签'} callBack={this.onAddLabel.bind(this, true)} />}
                {isShowAddLabelModel && <AddLabels isShowAddLabelModel={isShowAddLabelModel} callBack={this.onAddLabel.bind(this)} />}
                {isShowAddKeyWordModel && <AddKeyWords labelId={labelId} sameWordStr={sameWordStr} id={id} isShowAddKeyWordModel={isShowAddKeyWordModel} callBack={this.addKeyWordModel.bind(this)} />}
                {isShowAddKeyWordByFileModel && <AddKeyWordsByFile labelId={labelId} isShowAddKeyWordByFileModel={isShowAddKeyWordByFileModel} callBack={this.addKeyWordByFileModel.bind(this)} />}
            </div>
        );
    }
}

export default Resource
